<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>
    <script type="text/javascript">
        //jq方法
        $(function () {
            $('button').click(function () {
                $('div').hide(2000)
            });
        })

        //jq与DOM的相互转换
        $(function () {
            $('button').click(function (e) {
                //$('div')[0].style.display='none';//jq转DOM方法1
                //$('div').get(0).style.display = 'none';//jq转DOM方法2

                //DOM转jq的方法
/*                var box = document.getElementById('box');
                $(box).hide();*/
            })
        })

        //jq获取css


    </script>
</head>
<body>
    <button>按钮</button>

    <div id="box"></div>
</body>
</html>
